<template>
  <!--  -->
  <!-- @touchstart="start" @touchmove="moveevent" @touchend='endevent' -->
  <div class="pickupWrap" v-title="title">
    <v-touch v-on:swipeleft="left" v-on:swiperight="right">
      <!-- 顶部切换 -->
      <ul class="tabUl">
        <li class="tabli" @click="changeTab(1)" :class="{active:active=='1'}">
          <span>全部</span>
        </li>
        <li class="tabli" @click="changeTab(2)" :class="{active:active=='2'}">
          <span>待取件</span>
        </li>
        <li class="tabli" @click="changeTab(3)" :class="{active:active=='3'}">
          <span>已取件</span>
        </li>
      </ul>
      <!-- 主题内容 -->
      <div class="swipWrap">
        <component :is="currentView"></component>
      </div>
    </v-touch>
  </div>
</template>

<script>
  // import { InfiniteScroll } from 'mint-ui';
  // import { Loadmore } from 'mint-ui';
  import All from './sub/all.vue'
  import PickUp from './sub/pickUp.vue'
  import Cancel from './sub/cancel.vue'

  export default {

    data() {
      return {
        title: '取件',
        active: 1,
        num: 1,
        array: [],
        loading: false,
        Mode: '',
        currentView: All,
        startx: '',
        endx: '',
        isMoved: false
      }
    },
    methods: {
      changeTab(index) {
        this.active = index
        this.subChange()
      },
      left() {
        this.active++
        this.active = this.active > 3 ? 3 : this.active
        this.subChange()
      },
      right() {
        this.active--
          this.active = this.active < 1 ? 1 : this.active
        this.subChange()
      },
      init() {
        let Mode = sessionStorage.getItem("Mode")
        this.Mode = Mode
        let pickNumber = Number(sessionStorage.getItem('pickNumber'))
        if (pickNumber > 0) {
          this.active = 2
          this.subChange()
        }
      },
      subChange() {
        console.log(this.active);
        if (this.active == 1) {
          this.currentView = All
        } else if (this.active == 2) {
          this.currentView = PickUp
        } else if (this.active == 3) {
          this.currentView = Cancel
        }

      }
    },
    created() {
      this.init()
    },

    components: {
      All,
      PickUp,
      Cancel
    }
  }

</script>

<style lang='less' scoped>
  .pickupWrap {
    height: 100%;
    background: #F4F4F4; // tab栏
    &::-webkit-scrollbar {
      display: none
    }

    .tabUl {
      background: #fff;
      display: flex;
      height: 1.066667rem;
      line-height: 1.066667rem;
      border-bottom: 1px solid #F6F6F6;
      text-align: center;
      .tabli {
        flex: 1;
        font-size: 14px;
        color: #3d4244;
        &.active {
          span {
            border-bottom: 2px solid #19A4FF;
            color: #19A4FF;
          }
        }
        span {
          display: inline-block;
          padding: 0 8px;
          height: 1.066667rem;
          line-height: 1.066667rem;
        }
      }
    }
  }

</style>
<style>
  /* .mint-tab-container-wrap{
  height: 667px;
} */

</style>
